<template>
    <div class="app-container" style="padding: 50px;">
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="按时间筛选">
                <el-col :span="11">
                    <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间" align="right"
                                    :picker-options="pickerOptions" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="2" class="line">到</el-col>
                <el-col :span="11">
                    <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" align="right"
                                    :picker-options="pickerOptions" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="有害气体超标">
                <el-switch v-model="form.gas" style="padding: 0px 10px 0px 10px;"/>
            </el-form-item>
            <el-form-item label="温度范围">
                <el-slider v-model="form.temperatureGap" :marks="temperatureMark" range class="form-block"></el-slider>
            </el-form-item>
            <el-form-item label="湿度范围">
                <el-slider v-model="form.humidityGap" :marks="humidityMark" range class="form-block"></el-slider>
            </el-form-item>
            <el-form-item style="margin-top: 30px;">
                <el-button type="primary" @click="doSearch">搜索</el-button>
                <el-button type="warning" @click="resetAll">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="resultData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                  v-show="resultDataShow" stripe class="form-block">
            <!--            <el-table-column prop="datetime" label="时间" sortable></el-table-column>-->
            <!--            <el-table-column prop="type" label="数据类型" sortable></el-table-column>-->
            <!--            <el-table-column prop="value" label="数值" sortable></el-table-column>-->
            <el-table-column prop="createTime" label="时间" sortable></el-table-column>
            <el-table-column prop="temperature" label="温度(°C)" sortable></el-table-column>
            <el-table-column prop="humidity" label="相对湿度(%)" sortable></el-table-column>
            <el-table-column prop="gas" label="有害气体超标" sortable></el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: 'DataAnalyzeTable',
        data() {
            return {
                resultData: [],
                resultDataShow: false,
                form: {
                    startTime: '',
                    endTime: '',
                    gas: false,
                    temperatureGap: [0, 100],
                    humidityGap: [0, 100]
                },
                temperatureMark: {0: '0°C', 25: '25°C', 50: '50°C', 75: '75°C', 100: '100°C'},
                humidityMark: {0: '0%', 25: '25%', 50: '50%', 75: '75%', 100: '100%'},
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        },
                        {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        },
                        {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        },
                        {
                            text: '30天前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', date);
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            onSubmit() {
            },
            onCancel() {
            },
            resetAll() {
                this.resultDataShow = false;
                this.form = {startTime: '', endTime: '', gas: false, temperatureGap: [0, 100], humidityGap: [0, 100]};
            },
            doSearch() {
                this.resultData = [];
                this.resultDataShow = true;
                let gasFlag;
                if (this.form.gas === true) {
                    gasFlag = 0
                } else {
                    gasFlag = 1;
                }
                let toPost = JSON.stringify({
                    startTime: this.form.startTime,
                    endTime: this.form.endTime,
                    gasStatus: gasFlag,
                    minTemp: this.form.temperatureGap[0],
                    maxTemp: this.form.temperatureGap[1],
                    minHumidity: this.form.humidityGap[0],
                    maxHumidity: this.form.humidityGap[1],
                });
                this.$request({
                    url: '/api/sensor/selectSensorDataTable',
                    method: 'post',
                    data: toPost
                }).then(res => {
                    console.log(res)
                    try {
                        for (let data of res.data) {
                            if (data.gas === 1) {
                                data.gas = '正常';
                            } else {
                                data.gas = '超出正常范围'
                            }
                            this.resultData.push(data)
                        }
                    } catch (e) {
                        console.log(JSON.stringify(e))
                    }
                })
            }
        }
    };
</script>

<style scoped>
    .line {
        text-align: center;
    }

    .form-block {
        padding: 0px 20px 0px 20px;
    }
</style>
